<template>
  <div class="head">
    <!-- 顶部左侧 -->
    <div class="head-left">
      <div class="time">{{ time }}</div>
      <div class="weather">
        <weather></weather>
      </div>
    </div>
    <!-- 顶部左侧end -->

    <!-- 主导航 -->
    <ul class="mainNav">
      <template v-for="(item, index) in navList">
        <li
          v-if="!item.subTitle"
          @click="actChange(index)"
          :class="[{active: item.selected || item.path === $route.path}]"
          :key="index"
        >
          <span>{{ item.title }}</span>
          <div class="sub-header">
            <sub-nav :list="item.children"></sub-nav>
          </div>
        </li>
        <li
          v-if="item.subTitle"
          :key="index"
        >{{ item.title }}
          <span>{{ item.subTitle }}</span>
        </li>
      </template>
    </ul>
    <!-- 主导航end -->

    <!-- 登录 -->
    <div class="messageBox">
        信息中心
    </div>
  </div>
</template>

<script scoped>
  export default {
    name: 'Nav',
    data () {
      return {
        navList: [
          {
            title: '训练场地',
            selected: false,
            path: '/',
            children: [
              {
                title: '场地1',
                path: '/field/1'
              },
              {
                title: '场地2',
                path: '/field/2'
              },
              {
                title: '场地3',
                path: '/field/3'
              }
            ]
          },
          {
            title: '训练设备',
            selected: false,
            path: '/device',
            children: [
              {
                title: '设备1',
                path: '/device/1'
              },
              {
                title: '设备2',
                path: '/device/2'
              },
              {
                title: '设备3',
                path: '/device/3'
              }
            ]
          },
          {
            title: '训练大数据',
            subTitle: 'Training Data'
          },
          {
            title: '训练科目',
            selected: false,
            path: '/cate',
            children: [
              {
                title: '科目1',
                path: '/cate/1'
              },
              {
                title: '科目2',
                path: '/cate/2'
              },
              {
                title: '科目3',
                path: '/cate/3'
              }
            ]
          },
          {
            title: '训练成果',
            selected: false,
            path: '/result',
            children: [
              {
                title: '成果1',
                path: '/result/1'
              },
              {
                title: '成果2',
                path: '/result/2'
              },
              {
                title: '成果3',
                path: '/result/3'
              }
            ]
          }
        ],
        time: ''
      }
    },
    created () {
      this.initTime()
    },
    methods: {
      initTime () {
        let date = Date.now()
        this.time = this.$utils.formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        setInterval(() => {
          date = Date.now()
          this.time = this.$utils.formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        }, 1000)
      },
      actChange (index) {
        this.navList.forEach(element => {
          if (element.selected) {
            element.selected = false
          }
        })
        this.navList[index].selected = true
        this.$router.push(this.navList[index].path)
        this.$emit('change')
      }
    },
    components: {
      Weather: () => import('@/components/Weather'),
      SubNav: () => import('@/components/Subnav')
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .head{
    height: 80px;
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    z-index: 2;
    background:url(../assets/imgs/header.png) no-repeat top center;
    background-size:100% 100%;
    box-sizing: border-box;
    padding-top:15px;
    .head-left{
      position: absolute;
      top:20px;
      left: 15px;
      .time{
        color: #fff;
        width: 100px;
        text-align: center;
        float: left;
        line-height: 1.5;
        font-size: 12px;

      }
      .weather{
        float: left;
        margin-top:3px;
        margin-left: 10px;
      }
    }
    ul.mainNav{
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 860px;
      margin:0 auto;
      li{
        text-align: center;
        position: relative;
        height: 40px;
        line-height: 40px;

        span{
          cursor: pointer;
          box-sizing: border-box;
          padding: 6px 25px;
          font-size: 16px;
          color: #fff;
          border-radius: 70px;
        }
        &.active{
          span{
            background: red;
            color: #fff;
          }
        }

        &:nth-child(3){
          font-size:24px;
          font-weight: normal;
          color: #fff;
          line-height: 1;
          span{
            font-size: 12px;
            text-transform: uppercase;
            display: block;
            margin-top:5px;
          }
        }
        .sub-header{
          display: none;
          position: absolute;
          top: 40px;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          li{
            line-height: 25px;
          }
        }
        &:hover{
          .sub-header{
            display: block;
          }
        }
      }
    }

    .messageBox{
      background:#fff;
      padding:0 20px;
      height: 25px;
      line-height: 25px;
      font-size: 12px;
      cursor: pointer;
      border-radius:25px;
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      right: 20px;
    }
  }

@media screen  and ( max-width: 1600px ){
    .head{
      .head-left{
        display: none;
      }
    }
}
</style>
